<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>OpenLS: Geocoding Example</title>
    <script type="text/javascript" src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;

        function init() {
            OpenLayers.ProxyHost = "proxy.cgi?url=";
            map = new OpenLayers.Map('map', {
                controls: [
                    new OpenLayers.Control.PanZoom(),
                    new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.Navigation()
                ]
            });
            layer = new OpenLayers.Layer.OSM("OpenStreetMap", null, {
                transitionEffect: 'resize'
            });
            map.addLayers([layer]);
            map.zoomToMaxExtent();
        }
        function submitform() {
            var queryString = document.forms[0].query.value;
            OpenLayers.Request.POST({
                url: "http://www.openrouteservice.org/php/OpenLSLUS_Geocode.php",
                scope: this,
                failure: this.requestFailure,
                success: this.requestSuccess,
                headers: {"Content-Type": "application/x-www-form-urlencoded"},
                data: "FreeFormAdress=" + encodeURIComponent(queryString) + "&MaxResponse=1"
            });
        }
        function requestSuccess(response) {
            var format = new OpenLayers.Format.XLS();
            var output = format.read(response.responseXML);
            if (output.responseLists[0]) {
                var geometry = output.responseLists[0].features[0].geometry;
                var foundPosition = new OpenLayers.LonLat(geometry.x, geometry.y).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        map.getProjectionObject()
                        );
                map.setCenter(foundPosition, 16);
            } else {
                alert("Sorry, no address found");
            }
        }
        function requestFailure(response) {
            alert("An error occurred while communicating with the OpenLS service. Please try again.");
        }

    </script>
</head>
<body onload="init()">
<h1 id="title">OpenLS Geocoding Example</h1>

<div id="tags">
    OpenLS, XLS, Geocoding
</div>

<p id="shortdesc">
    Show how to use an OpenLS service.
</p>

<form name="input" action="javascript: submitform();" method="post">
    <label for="query">Search for address:</label> <input type="text" id="query" size=50 name="query"
                                                          value="Rue des Berges 37 Payerne"/>
    <input type="submit" value="Submit"/>
</form>

<br>

<div id="map" class="smallmap"></div>


<div id="docs">
    <p>
        Geocoding example using the http://www.openrouteservice.org/ OpenLS service. Recenter to the first item of the results.
    </p>
</div>
</body>
</html>
